<!--
 * @Description: 立体柱状图
 * @Author: Colin
 * @Date: 2023-10-17 10:33:42
-->

<template>
  <div class="ht-base-echart">
    <div :id="chartId" :style="{ height, width, ...barStyle }"></div>
    <div v-show="!chartData.length" class="no-data-tip">暂无数据</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'BaseEcharts',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    title: {
      type: String,
      default: ''
    },
    barStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    chartData: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  mounted() {
    this.initEchart()
    window.addEventListener('resize', () => {
      this.echart?.resize()
    })
  },
  activated() {
    this.echart?.resize()
  },
  data() {
    return {
      chartId: this.rndNum(10),
      echart: null // 挂载echart实例
    }
  },
  watch: {
    chartData: {
      handler() {
        this.drawEchart()
      },
      deep: true
    }
  },
  methods: {
    rndNum: function (n) {
      var rnd = ''
      for (var i = 0; i < n; i++) rnd += Math.floor(Math.random() * 10)
      return rnd
    },
    initEchart: function () {
      if (!this.echart) {
        this.echart = echarts.init(document.getElementById(this.chartId))
      } else {
        this.echart.clear()
      }
    },
    setOptions: function () {
      // let that = this
      const options = {
        title: {
          text: ''
        },
        grid: {
          top: 20,
          left: 40,
          right: 40,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          inverse: true,
          offset: 5,
          axisLabel: {
            show: true,
            interval: 0, // 'auto',
            color: '#fff', //'rgb(106, 148, 255)',
            fontSize: 16,
            rotate: 45
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: this.chartData.map(item => item.label)
        },
        yAxis: {
          type: 'value',
          offset: 5,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(106, 148, 255)'
            }
          },
          splitLine: {
            show: true
          },
          axisTick: {
            show: true,
            inside: true,
            length: 4
          },
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value}%',
            fontSize: 18,
            color: '#aaddff' // 'rgb(106, 148, 255)'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return `${params[0].name}<br/>${params[0].seriesName}：${params[0].value.per}`
          }
        },
        series: [
          {
            // 上半截柱子(背部阴影bar)
            name: '交货不良率',
            type: 'bar',
            barWidth: 16,
            barGap: '-100%',
            z: 0,
            itemStyle: {
              //lenged文本
              opacity: 1,
              borderRadius: [6, 6, 0, 0],
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(44, 225, 142)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(16, 208, 210)' // 100% 处的颜色
                  }
                ]
              }
            }
            // data: this.chartData.map(item => item.maxValue)
          }
        ],
        dataset: {
          dimensions: ['label', 'perNum'],
          source: this.chartData
        }
      }
      this.echart.setOption(options)
    },
    drawEchart() {
      this.echart.clear()
      this.setOptions()
    }
  }
}
</script>

<style scoped>
.ht-base-echart {
  position: relative;
  width: 100%;
  height: 100%;
}
.no-data-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ccc;
}
</style>
